<template>
  <div id="container">
    <div ref="mainHeader" id="mainHeader">
      <Top />
    </div>
    <div id="main">
      <div id="searchBar">
        <div id="searchInput">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
          </el-input>
        </div>
        <div class="searchTitle">
          热门搜索：&nbsp;JAVA&nbsp;&nbsp;C++&nbsp;&nbsp;python
        </div>
      </div>
      <div id="mainBody">
        <div id="mainLeft">
          <div id="mainLeftBody">
            <el-card
              class="box-card blogList"
              v-for="blog in blogList"
              :key="blog.id"
            >
              <div class="text item clearfix">
                <span style="font-size:18px">{{ blog.title }}</span>
                <div class="bottom clearfix">
                  <i class="el-icon-menu blogIconText">&nbsp;分类</i>&nbsp;
                  <i class="el-icon-view blogIconText">&nbsp;0</i>&nbsp;
                  <i class="el-icon-star-off blogIconText">&nbsp;0</i>&nbsp;
                  <i class="el-icon-time blogIconText">
                    <time class="time">&nbsp;{{ blog.updateTime }}</time> </i
                  >&nbsp;
                  <el-button type="text" class="button">查看</el-button>
                </div>
              </div>
            </el-card>
          </div>
          <el-button @click="test()">
            test
          </el-button>
        </div>
        <div id="mainRight">
          <div class="mainRightBody">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>标签</span>
              </div>
              <el-tag
                v-for="item in labelList"
                :key="item.id"
                style="margin-right:3px;"
                class="labelTag"
              >
                {{ item.labelName }}
              </el-tag>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>分类</span>
              </div>
              <el-tag
                v-for="item in classificationList"
                :key="item.id"
                style="margin-right:3px;"
                class="labelTag"
              >
                {{ item.name }}
              </el-tag>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>关注</span>
              </div>
              <el-input
                placeholder="1234567890@qq.com"
                suffix-icon="el-icon-message"
                :disabled="true"
                style="background:#ffffff"
              >
              </el-input>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Top from "@/components/top";
import * as ossLoad from "@/components/upload/oss";
import request from "./../utils/httpRequest";
export default {
  name: "Index",
  props: {},

  components: {
    Top
  },

  data() {
    return {
      blogList: [],
      labelList: [],
      classificationList: [],
      currentDate: new Date()
    };
  },

  mounted() {
    this.getLabelList();
    this.getBlogsList();
    this.getClassificationList();
  },

  methods: {
    test() {
      // console.log(window)
    },
    getBlogsList() {
      request({
        url: "/blog/blogs/list",
        method: "get"
      }).then(res => {
        if (res.code == 0) {
          this.blogList = res.page.list;
        } else {
          this.blogList = [];
        }
        console.log("blogList:", this.blogList);
      });
    },
    getBlogContent(fileName) {
      return ossLoad.downLoadBuffer(fileName);
    },
    getLabelList() {
      request({
        url: "/blog/label/list",
        method: "get"
      }).then(res => {
        // console.log(res);
        if (res.code == 0) {
          this.labelList = res.page.list;
        } else {
          this.labelList = [];
        }
      });
    },
    getClassificationList() {
      request({
        url: "/blog/classification/list",
        method: "get"
      }).then(res => {
        // console.log(res);
        if (res.code == 0) {
          this.classificationList = res.page.list;
        } else {
          this.classificationList = [];
        }
        console.log(res);
      });
    }
  },

  watch: {}
};
</script>

<style>
.searchTitle {
  display: inline;
  top: 22px;
  right: 60px;
  position: relative;
}
#searchInput {
  width: 60%;
  float: left;
  margin-left: 6%;
  margin-top: 15px;
  margin-bottom: 10px;
}
#searchBar {
  width: 70%;
  display: inline-block;
  background: #fff;
  margin-top: 20px;
}
.leftTitle {
  text-align: left;
  margin-left: 10%;
  font-size: 20px;
}
#container {
  background: #eee;
}
.blogList {
  margin: auto;
  margin-top: 10px;
  width: 80%;
}
#indexTop {
  width: 80%;
  margin-top: 0%;
}
#main {
  width: 100%;
}
#mainBody {
  width: 70%;
  background: #ffffff;
  /* border: 1px solid black; */
  margin: auto;
  margin-top: 20px;
  display: inline-block;
}
#mainLeft {
  float: left;
  width: 65%;
  margin: 0;
}
#mainLeftBody {
  margin: auto;
}
#mainRight {
  float: right;
  width: 35%;
  margin: auto;
}
.mainRightBody {
  width: 80%;
}
.labelTag {
  margin-left: 10px;
  margin-top: 10px;
}
.time {
  font-size: 13px;
  color: #999;
}
.blogIconText {
  font-size: 12px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.box-card {
  margin-top: 10px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}
.clearfix {
  text-align: left;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
